// src/pages/goods/goods.vue
<script setup lang="ts">
import { ref } from 'vue';
let keywords = ref('')
import { getGoodsListByName } from '@/services/goods';
import type { ProducTItem } from '@/types/global';
import { onLoad } from '@dcloudio/uni-app';
// 接受传递过来的页面参数
const query = defineProps<{
  keywords: string
}>()
//搜索到的商品的数据
const searchGoodsList = ref<ProducTItem[]>()

//页面加载时获取数据
onLoad(async () => {
  searchGoodsList.value = await getGoodsListByName(query.keywords)
  keywords.value = query.keywords
})

///跳转到商品详情页
const navigatoDetail = (id: string) => {
  uni.navigateTo({ url: `/pages/goods/index?id=${id}` })
}
//发起搜索请求
const searchKeywords = async () => {
  searchGoodsList.value = await getGoodsListByName(keywords.value)
  console.log("搜索返回的数据", searchGoodsList.value)
}
</script>
<template>
  <!-- 搜索框 -->
  <view class="search">
    <view class="input">
      <input type="text" style="width: 100%;" v-model="keywords" />
      <icon type="search" :size="23" @click=searchKeywords />
    </view>
  </view>
  <!-- 搜索内容 -->
  <div class="searchDetail" v-if="searchGoodsList">
    <div v-for="item in searchGoodsList" class="goodsList">
      <div class="goodsItem" @tap="navigatoDetail(item._id)">
        <image :src="item.images[item.cover]" mode="scaleToFill" style="flex:2.5;" />
        <div style="display: flex; flex:7.5; justify-content: space-between;">
          <div class="nameBox" style="flex:1">
            <text class="textTwo">
              {{ item.name }}
            </text>
            <div style="display: flex; justify-content: space-between;">
              <text style="color: red;">
                ¥ {{ item.price.sale }}
              </text>
              <text style="width: 5rem; color: #777;" class="textOne">
                没卖出去
              </text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else>笑死 没得东西
  </div>
</template>

<style lang='scss' scoped>
.search {
  padding: 20rpx 30rpx 20rpx;
  background-color: #fff;

  .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64rpx;
    padding: 0 26rpx;
    color: #8b8b8b;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #f3f4f4;
  }
}


.goodsList {
  border: 0;
  display: flex;
  width: 94%;
  margin: 0 3%;
  font-size: 1rem;

  .goodsItem {
    display: flex;
    width: 100%;
    background-color: #fff;
    margin: 20rpx 0;
    padding: 15rpx;
    border-radius: 10rpx;

    image {
      border-radius: 10rpx;
      width: 150rpx;
      height: 150rpx;
      margin-right: 1rem;
    }

    .nameBox {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
  }
}

page {
  background-color: #efefef;
}

.textTwo {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;

}

.textOne {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

}
</style>

